<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="container" width="600" height="600"></canvas>
		<input type="checkbox" id="lineSwitch" checked="false"/>直线
	</body>
	<script type="text/javascript" src="js/sphere.js" ></script>
	<script>
		function run(){
			//console.log("refresh");
			move();
			collide();
			paint();
			requestAnimationFrame(run);
		}
		
		function move(){
			for(i in objs){
				var sphere=objs[i];
				if(sphere.isFix) continue;
				var accX=0;
				var accY=0;
				for(j in objs){
					if(objs[j]==sphere) continue;
					var delX=objs[j].x-sphere.x;
					var delY=objs[j].y-sphere.y;
					//console.log(delX+"---"+delY);
					var a=objs[j].mass/(Math.pow(delX,2)+Math.pow(delY,2));
					//if(a>100)a=100;
					var angle=Math.atan(Math.pow(delY,2)/Math.pow(delX,2));
					if(delX>0&&delY<0)angle=-angle;
					else if(delX<0&&delY>0)angle=Math.PI-angle;
					else if(delX<0&&delY<0)angle=Math.PI+angle;
					//angle=angle*180/Math.PI;
					var ax=a*Math.cos(angle);
					var ay=a*Math.sin(angle);
					//console.log(angle+">>>"+a+"("+ax+","+ay+")("+delX+","+delY+")");
					accX+=ax;
					accY+=ay;
					/*var delAccX=(sphere.spX*sphere.spX)/delX;
					var delAccY=(sphere.spY*sphere.spY)/delY;
					if(sphere.spX>0)delAccX=0-delAccX;
					if(sphere.spY>0)delAccY=0-delAccY;
					console.log(sphere.spX);*/
					//console.log(delX+">>"+delY);
					
					/*var delAccX=Math.sqrt(10000/(delX*delX));
					if(delX<0)delAccX=0-delAccX;
					var delAccY=Math.sqrt(10000/(delY*delY));
					if(delY<0)delAccY=0-delAccY;
					//console.log(delX+"  "+delY+"  "+accX+"  "+accY);
					accX+=delAccX;
					accY+=delAccY;*/
				}
				sphere.move(accX,accY);
			}
		}
		
		function collide(){
			for(i in objs){
				var sphere=objs[i];
				if(sphere.x<=0||sphere.x>=screenW)
					sphere.spX=0-sphere.spX;
				if(sphere.y<=0||sphere.y>=screenH)
					sphere.spY=0-sphere.spY;
			}
		}

		function paint(){
			ctx.clearRect(0, 0, screenW, screenH);
			for(i in objs){
				var sphere=objs[i];
				
				if(lineSwitch.checked)
				for(j in objs){
					if(!objs[j].isFix)continue;
					ctx.strokeStyle="#cee";
					ctx.lineWidth=1;
					ctx.beginPath();
					ctx.moveTo(objs[j].x,objs[j].y);
					ctx.lineTo(sphere.x,sphere.y);
					ctx.closePath();
					ctx.stroke();
				}
				
				sphere.draw(ctx);
			}
		}
		
		var screenW=600;
		var screenH=600;
		var container=document.getElementById("container");
		var lineSwitch=document.getElementById("lineSwitch");
		container.width=600;
		container.height=600;
		var ctx=container.getContext("2d");
		var objs=[]
		objs.push(new Sphere(1000,screenW/2,screenH/2,0,0,true));
		//objs.push(new Sphere(390,320,0,0,false));
		//objs.push(new Sphere(180,300,0,0,false));
		/*objs.push(new Sphere(280,320,0,0,false));
		objs.push(new Sphere(380,200,0,0,false));
		objs.push(new Sphere(180,100,0,0,false));
		objs.push(new Sphere(280,500,0,0,false));*/
		
		var runningObj=new Sphere(1,250,250,-3,3);
		objs.push(new Sphere(1,200,210,-2,2,false));
		objs.push(new Sphere(1,450,460,1.6,-1.6,false));
		objs.push(new Sphere(1,500,500,1.2,-1.2,false));
		objs.push(runningObj);
		
		//run();
		var w = window;
		requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
		
		//var timer =setInterval(run,24);
		run();
	</script>
</html>
